<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>浮动练习3</title>
		<style>
			.fu1{
				border: 5px solid #000;
			}
			span{
				background-color: #ff0;
				border: 1px solid #f00;
				width: 100px;
				height: 100px;
				/*  内联元素浮动会脱离文档流，变成块级元素，可以设置宽高  */
				float: right;
				/* 父级元素会高度坍塌 */
				margin-top: 50px;
				
			}
			
			.fu2{
				background-color: #f0f;
				border: 1px solid green;
				margin-top: 180px;
				width: 120px;
			}
			.z1 {
				width: 100px;
				height: 100px;
				background-color: #f00;
				margin-bottom: 20px;
				float: right;
			}
			.z2 {
				width: 100px;
				height: 100px;
				background-color: #00f;
				margin-top: 40px;
				float: left;
			}
			.z3{
				width: 100px;
				height: 100px;
				background-color: #0ff;
				margin-top: 40px;
				float: left;
			}
			
			
		</style>
	</head>
	<body>
		
		<div class="fu1">
			
			<span>1</span>
			<span>2</span>
		</div>
		<hr>
		<div class="fu2">
			<div class="z1"></div>
			<div class="z2"></div>			
			<div class="z3"></div>
		</div>

		
		
		
	</body>
</html>